<template>
  <div class="app-container">
    <!-- <div class="title">工单编号:{{ workOrderCode }}</div> -->
    <div class="stage-box" v-show="resultType === 'workOrder'">
      <div class="stage-title">生产</div>
      <div
        class="flex-box"
        v-for="(item, index) in snList"
        :key="item.snCode + index"
        style="margin-bottom: 20px"
      >
        <div class="flex-box">
          <div class="sn-box">
            <div>SN码</div>
            <div>{{ item.snCode }}</div>
          </div>
          <div class="sn-box-arrow"></div>
        </div>
        <div style="flex:1;">
          <div
            class="stage-right"
            style="
              flex: 1;
              display: flex;
              flex-wrap: wrap;
              border-top: 1px solid #ddd;
              border-left: 1px solid #ddd;
            "
          >
            <div
              class="box-card"
              v-for="(item2, index2) in item.reportList"
              :key="item2.workorderId + index2"
            >
              <div
                style="text-align: center; font-size: 14px; font-weight: 600"
              >
                {{ item2.workstationName }}
              </div>
              <div style="font-weight: 500">{{ item2.userName }}</div>
              <div>
                <span class="box-card-left-title">上料防错：</span
                >{{
                  moment(item2.startReporting).format("YYYY-MM-DD HH:mm:ss")
                }}
              </div>
              <div>
                <span class="box-card-left-title">工位自检：</span
                >{{ item2.checkTime }}
              </div>
              <div>
                <span class="box-card-left-title">报工：</span
                >{{
                 item2.finishReporting? moment(item2.finishReporting).format("YYYY-MM-DD HH:mm:ss"):''
                }}
              </div>
              <div>
                <span class="box-card-left-title">时长：</span
                >{{ item2.actualTime }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="arrows-bottom">
        <div class="arrows-line"></div>
        <div class="arrows"></div>
      </div>
      <div class="collect-box">
        <div>
          生产汇报单:
          <span class="collect-box-recptCode">{{
            formData.productReportNum
          }}</span>
          {{ formData.productReportTime }}
        </div>
      </div>
    </div>
    <div
      class="stage-box"
      v-show="resultType === 'item'"
      style="padding-left: 50px"
    >
      <div class="stage-title">采购</div>
      <div class="flex-box">
        <div
          class="flex-box center-box"
          style="margin-top: 20px"
          v-for="(item, index) in procureDataList"
          :key="item + index"
        >
          <div class="flow-section" style="position: relative">
            <div>{{ item.name }}</div>
            <div>{{ item.num }}</div>
            <div>
              {{ item.worker }} <span v-show="item.worker">|</span>
              {{ item.opeTime }}
            </div>
            <div
              style="
                display: flex;
                justify-content: center;
                align-items: center;
              "
              v-show="(item.result !== '1' && item.result !== 'C')"
            >
              <img src="./down-arrow.png" />不合格
            </div>
            <div v-show="item.result != '1' && item.index == 4">采购退料单</div>
          </div>
          <div style="position: relative; height: fit-content" v-show="(item.result === '1' || item.result === 'C') && index < procureDataList.length - 1">
            <div
              style="position: absolute; top: -6px; left: 10px; width: 30px"
            >
              通过
            </div>
            <img
              src="./right-arrow.png"
              style="height: fit-content; margin: 10px"
            />
          </div>
          <!-- <div>销售出库单</div> -->
        </div>
      </div>
    </div>
    <div
      class="stage-box"
      v-show="resultType === 'item'"
      style="padding-left: 50px"
    >
      <div class="stage-title">生产</div>
      <div class="flex-box">
        <span style="margin-right: 30px"
          >工单编号：{{ produceData.workorderCode }}</span
        >
        <span>SN码：{{ produceData.snCode }}</span>
      </div>
      <div class="flex-box center-box" style="margin-top: 20px">
        <div class="flow-section">
          <div>{{ produceData.workstationName }}</div>
          <div>
            {{ produceData.workstationName }} | {{ produceData.userName }}
          </div>
        </div>
        <img
          src="./right-arrow.png"
          style="height: fit-content; margin: 10px"
        />
        <div class="flow-section">
          <div>上料防错</div>
          <div>
            {{
              moment(produceData.startReporting).format("YYYY-MM-DD HH:mm:ss")
            }}
          </div>
        </div>
        <img
          src="./right-arrow.png"
          style="height: fit-content; margin: 20px"
        />
        <div class="flow-section">
          <div>工位检验</div>
          <div>{{ produceData.checkTime }}</div>
        </div>
        <img
          src="./right-arrow.png"
          style="height: fit-content; margin: 20px"
        />
        <div class="flow-section">
          <div>报工</div>
          <div>{{ moment(produceData.finishReporting).format("YYYY-MM-DD HH:mm:ss")}}</div>
        </div>
      </div>
    </div>
    <div class="stage-box" v-show="resultType === 'snCode'">
      <div class="stage-title">生产</div>
      <div class="flex-box station-list" style="flex-wrap: wrap">
        <div
          class="fx-item flex-box"
          v-for="(item, index) in snList2"
          :key="item + index"
        >
          <div class="fx-item-left">
            <div style="font-weight: 500">{{ item.workstationName }}</div>
            <div>{{ item.userName }}</div>
          </div>
          <div class="fx-item-right">
            <div class="fx-item-top">
              <div class="flex-box" style="justify-content: space-between">
                <div class="fx-item-remark">
                  <span class="fx-item-remark-title">上料防错：</span
                  >{{ item.startReporting }}
                </div>
                <div
                  class="fx-item-remark"
                  style="width: 210px; text-align: left"
                >
                  <span class="fx-item-remark-title">工位检验：</span
                  >{{ item.checkTime }}
                </div>
              </div>
              <div class="flex-box" style="justify-content: space-between">
                <div class="fx-item-remark">
                  <span class="fx-item-remark-title">报工：</span
                  >{{ item.finishReporting }}
                </div>
                <div
                  class="fx-item-remark"
                  style="width: 210px; text-align: left"
                >
                  <span class="fx-item-remark-title">时长：</span
                  >{{ item.actualTime }}
                </div>
              </div>
            </div>
            <el-table
              :data="item.itemList ? item.itemList : []"
              height="250"
              border
              style="width: 100%"
            >
              <el-table-column prop="itemCode" label="物料编码">
              </el-table-column>
              <el-table-column prop="itemName" label="物料名称">
              </el-table-column>
              <el-table-column prop="specification" label="规格型号">
              </el-table-column>
              <el-table-column prop="snCodeItem" label="序列号">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <div class="stage-box">
      <div class="stage-title">质检</div>
      <div>
        <div>
          <div
            class="sn-flow-box flex-box"
            v-for="(item, index) in qcDataList"
            :key="item.snCode + index"
          >
            <div class="sn-box">
              <div>SN码</div>
              <div>{{ item.snCode }}</div>
            </div>
            <div class="sn-box-arrow"></div>
            <div
              v-for="(item2, index2) in item.dataList"
              :key="item2.qcType + index2"
              class="flex-box"
            >
              <div class="center-box">
                <div>{{ item2.qcType }}</div>
                <div>
                  {{ item2.worker }} | {{ item2.opeBeginTime }}
                  <span v-show="item2.opeEndTime">~</span>
                  {{ item2.opeEndTime }}
                </div>
                <div v-show="item2.result !== '1'">
                  <div
                    style="
                      display: flex;
                      justify-content: center;
                      align-items: center;
                    "
                  >
                    <img src="./down-arrow.png" />不通过
                  </div>
                  <div>质量异常，返工生产</div>
                </div>
              </div>
              <div
                v-show="
                  item2.result === '1' && index2 < item.dataList.length - 1
                "
                class="center-box"
                style="margin: 0 10px"
              >
                <div>通过</div>
                <img src="./right-arrow.png" style="height: fit-content" />
              </div>
            </div>
          </div>
          <div>
            <div class="center-box collect-box">
              FQC质检单：<span class="collect-box-recptCode">{{
                formData.fqcNum
              }}</span>
              <span style="margin-right: 80px"
                >创建时间：{{ formData.fqcCreateTime }}</span
              >
              <span style="margin-right: 80px"
                >检验时间：{{ formData.fqcCheckTime }}</span
              >
              <span style="margin-right: 80px"
                >检验人：{{ formData.checkUser }}</span
              >
              <span
                >检验结果：<el-tag
                  type="success"
                  v-show="formData.checkResult == 1"
                  >合格</el-tag
                ><el-tag type="danger" v-show="formData.checkResult === 0"
                  >不合格</el-tag
                ></span
              >
            </div>
            <!-- <div class="flex-box">
              <div class="center-box">
                <img src="./down-arrow.png"/>
                <div>检验</div>
                <div>{{ formData.checkUser }} | {{ formData.fqcCheckTime }}</div>
              </div>
              <div class="center-box" style="margin: 28px 20px;">
                <div>不通过</div>
                <img src="./right-arrow.png" style="height: fit-content" />
              </div>
              <div style="margin-top: 44px;">
                质量异常，返工生产
              </div>
            </div> -->
          </div>
        </div>
      </div>
    </div>
    <div class="stage-box">
      <div class="stage-title">仓储</div>
      <div
      v-show="formData.checkResult === 1"
        class="flex-box center-box"
        style="align-items: center; margin-top: -41px; justify-content: center"
      >
        <!-- <img src="./down-arrow2.png" style="height: 80px;
        width: 14px;" /> -->
        <div class="arrows-bottom" style="width: auto">
          <div class="arrows-line"></div>
          <div class="arrows"></div>
        </div>
        <div style="padding-top: 10px">检验合格</div>
      </div>
      <div>
        <div class="center-box collect-box" v-show="wmData1.wmName || wmData1.recptCode">
          {{ wmData1.wmName }}<span v-show="wmData1.wmName">：</span><span class="collect-box-recptCode">{{
            wmData1.recptCode
          }}</span>
          {{ wmData1.opeTime }}
        </div>
        <img
          v-show="wmDataList.length"
          src="./down-arrow.png"
          style="margin-left: 84px"
        />
        <div class="flex-box">
          <div
            class="flex-box center-box"
            style="margin-top: 20px"
            v-for="(item, index) in wmDataList"
            :key="item"
          >
            <div class="flow-section">
              <div>{{ item.wmName }}</div>
              <div>{{ item.recptCode }}</div>
              <div>{{ item.worker }} | {{ item.opeTime }}</div>
            </div>
            <img
              v-show="index < wmDataList.length - 1"
              src="./right-arrow.png"
              style="height: fit-content; margin: 20px"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="stage-box" style="padding-left: 50px">
      <div class="stage-title" style="left: -30px">销售发货</div>
      <div class="flex-box"  v-show="resultType ==='item'" >
        <span style="margin-right: 30px">工单编号：{{ formData.workOrderCode }} </span>
        <span>SN码：{{ formData.snCode }}</span>
      </div>
      <div
        class="flex-box center-box"
        style="margin-top: 20px"
        v-for="(item, index) in saleDataList"
        :key="item"
      >
        <div class="flow-section">
          <div>{{ item.saleName }}</div>
          <div>{{ item.saleNum }}</div>
          <div>
            {{ item.worker }} <span v-show="item.worker">|</span>
            {{ item.opeTime }}
          </div>
          <div v-show="item.result !== '1'">
            <div
              style="
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <img src="./down-arrow.png" />不通过
            </div>
            <div>返工生产</div>
          </div>
        </div>
        <img
          v-show="item.result == '1' && index < saleDataList.length - 1"
          src="./right-arrow.png"
          style="height: fit-content; margin: 20px"
        />
      </div>
    </div>
    <div class="stage-box">
      <div class="stage-title" style="left: -30px">售后</div>
      <!-- <div class="flex-box">
        <span style="margin-right: 30px">工单编号：MQ005202</span>
        <span>SN码：80240710062</span>
      </div>
      <div class="flex-box center-box" style="margin-top: 20px">
        <div class="flow-section">
          <div>维修</div>
          <div>2024-08-16 10:24:37</div>
        </div>
        <img
          src="./right-arrow.png"
          style="height: fit-content; margin: 20px"
        />
        <div class="flow-section">
          <div>保养</div>
          <div>张三 | 2024-08-16 10:24:37</div>
        </div>
      </div> -->
    </div>
    <div class="stage-box" v-if="resultType == 'snCode'">
      <div class="stage-title" style="left: -30px">三码合一</div>
      <div class="flex-box" style="margin-left: 20px;">
        <div class="codeCon">
          <div class="codeLabel">SN码(序列码)</div>
          <div v-if="formData.snCode">
            <svg id="snCodeRef"></svg>
          </div>
        </div>
        <div class="codeCon">
          <div class="codeLabel">装配码(ZN码)</div>
          <div v-if="formData.assemblyCode">
            <div ref="assemblyCodeRef"></div>
          </div>
        </div>
        <div class="codeCon">
          <div class="codeLabel">售后码</div>
          <div v-if="formData.aftersaleCode">
            <div ref="aftersaleCodeRef"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import QRCode from "qrcodejs2";
import JsBarcode from "jsbarcode"
export default {
  name: "compreTrace",
  data() {
    return {
      moment: moment,
      workOrderCode: null,
      snList: [], //生产阶段
      qcDataList: [], //质检阶段
      wmData1: {}, //仓储1
      wmDataList: [], //仓储2
      saleDataList: [], //销售发货阶段
      procureDataList: [], //采购阶段
      produceData: {}, //生产
      formData: {},
      resultType: null,
      snList2: [],
    };
  },
  created() {},
  mounted() {
    // this.init(this.formData,this.resultType);
  },
  methods: {
    reset(){
      this.workOrderCode = null
      this.snList = [] //生产阶段
      this.qcDataList = [] //质检阶段
      this.wmData1 = {} //仓储1
      this.wmDataList = [] //仓储2
      this.saleDataList = [] //销售发货阶段
      this.procureDataList = [] //采购阶段
      this.produceData = {} //生产
      this.formData = {}
      this.resultType = null
      this.snList2 =  []
    },
    init(formData, resultType) {
      this.reset()
      this.formData = formData;
      this.resultType = resultType;
      this.workOrderCode = formData.workOrderCode;
      this.procureDataList = formData.procureDataList
        ? formData.procureDataList
        : [];
      this.produceData = formData.produceData ? formData.produceData : {};
      this.snList = formData.snList ? formData.snList : [];
      this.snList2 = formData.snList ? formData.snList : [];
      this.qcDataList = formData.qcDataList ? formData.qcDataList : [];
      const wmDataList = formData.wmDataList ? formData.wmDataList : [];
      const that = this;
      wmDataList.forEach((item) => {
        if (item.index === 1) {
          that.wmData1 = item;
        }
      });
      this.wmDataList = wmDataList.filter((item) => item.index !== 1);
      this.saleDataList = formData.saleDataList ? formData.saleDataList : [];
     
      this.$nextTick(() => {
        this.printQrCode("snCode","barcode");
        this.printQrCode("assemblyCode");
        this.printQrCode("aftersaleCode");
      })

    },
    printQrCode(property, type){
      if(this.formData[property]){
        if(type){
          JsBarcode("#"+property+"Ref", this.formData[property], {
            height: "100px"
          });
          return;
        }else{
          this.$refs[property+"Ref"].innerHTML = "";
          new QRCode(this.$refs[property+"Ref"], {
            width: 100,
            height: 100,
            text: this.formData[property],
          });
        }
      }
    }
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  padding-left: 20px;
  padding-top: 0;
  font-size: 14px;
}
.title {
  // font-size: 20px;
  background: #4ec4c5;
  padding: 10px;
  color: #fff;
}
.stage-box {
  ::v-deep {
    .el-card__body {
      padding: 8px;
    }
  }
  .sn-flow-box {
    padding: 12px;
    margin-left: 20px;
  }
  border-left: 1px dotted #ccc;
  padding: 16px;
  border-bottom: 1px dotted #ccc;
  position: relative;
  .stage-title {
    position: absolute;
    padding: 4px;
    background: #fff;
    left: -26px;
    top: 50%;
  }
  .sn-box {
    text-align: center;
    background-color: #e7faf0;
    color: #13ce66;
    line-height: 18px;
    padding: 10px;
    height: 56px;
  }
  .sn-box-arrow {
    width: 0;
    height: 0;
    border-bottom: 28px solid transparent;
    border-top: 28px solid transparent;
    border-left: 28px solid #e7faf0;
  }
  .fx-item {
    width: 50%;
    margin-bottom: 22px;
    .fx-item-left {
      width: 120px;
      text-align: center;
      padding-top: 12px;
    }
    .fx-item-right {
      flex: 1;
      .fx-item-top {
        padding: 10px 24px;
        background: #e4f1f8;
      }
      .fx-item-remark {
        text-align: left;
        line-height: 26px;
        // margin-bottom: 6px;
        // padding: 10px;
        // background: #00b3ee;
        // color: #fff;
        // font-size: 14px;
        // border-radius: 5px;
        .fx-item-remark-title {
          width: 72px;
          display: inline-block;
          text-align: right;
        }
      }
    }
  }
}
.box-card {
  width: 25%;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: 8px;
  .box-card-left-title {
    color: #666;
  }
}
.arrows-bottom {
  width: 100%;
  margin-top: 14px;
  .arrows-line {
    width: 6px;
    height: 24px;
    background: #2ecc71;
    margin: 0 auto;
  }
  .arrows {
    width: 0;
    height: 0;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    border-top: 6px solid #2ecc71;
    margin: 0 auto;
  }
}
.collect-box {
  width: 100%;
  // background-color: #ffe9d0;
  background-color: #e3edf9;
  padding: 8px 16px;
  border-radius: 5px;
  text-align: center;
  .collect-box-recptCode {
    font-weight: 500;
    margin-right: 80px;
    color: #f41515;
  }
}
.flex-box {
  display: flex;
}
.flex-box .codeCon{
    margin-right: 30px;
    display: flex;
    flex-direction: column;

    align-items: center;
}

.flex-box .codeLabel{
  height: 40px;
  width: 100px;
  text-align: center;
  line-height: 40px;
  font-size: 14px;
  color: #6ab87f;
  border: #bbe0cb 1px solid;
  border-radius: 5px;
  background-color: #e6faef;
  margin-bottom: 20px;
}
.center-box {
  text-align: center;
}
.quality-inspection-certificate {
}


</style>
